<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>喵喵幸运转盘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="hotcss" content="design-width=640 max-width=640 initial-dpr=1">
    <link href="/vendor/layui-v2.8.8/layui/css/layui.css?v={{ time() }}" rel="stylesheet">
    <script src="/vendor/layui-v2.8.8/layui/layui.js?v={{ time() }}"></script>
    @vite(['resources/scss/spin_wheel/index.scss', 'resources/js/spin_wheel.js', 'resources/js/vuecomponents/components.js'])
</head>

<body>
    <div class="container" id="vapp">
        <div class="lottery-num-box">
            <div class="tips-btn" v-on:click="showRule(true)"></div>
            <div class="num-box">
                <label ref="lotteryNum">0</label>/24
            </div>
        </div>
        <div class="spin-wheel-box">
            <div class="spin-wheel-img" :style="rotateStyle"><img src="/images/spin_wheel/prize.png" alt="">
            </div>
            <div id="circle-area" class="circle-area" v-on:click="showPrizeDesc($event)"></div>
            <div class="spin-wheel-point"></div>
        </div>

        <div class="start-box">
            <template v-if="isForbid">
                <div class="start-btn disabled"></div>
            </template>
            <template v-else>
                <div class="start-btn" v-on:click="lottery()"></div>
            </template>
        </div>

        <div class="lottery-log-btn" v-on:click="showLotteryLog(true)"></div>

        <div class="mork-wrap" @touchmove.prevent.stop v-if="isRun"></div>

        <template v-if="isRuleShow">
            <div class="mask" v-on:click="showRule(false)"></div>
            <div class="rule-box">
                <div class="close-btn" v-on:click="showRule(false)"></div>
                <div class="rule-content">
                    <template v-for="item in ruleList">
                        <div class="rule-item">
                            <div class="rule-text">@{{ item.text }}</div>
                            <template v-if="item.status == 1">
                                <div class="rule-status done"></div>
                            </template>
                            <template v-else>
                                <div class="rule-status"></div>
                            </template>
                        </div>
                    </template>
                </div>
            </div>
        </template>

        <template v-if="isLotteryLogShow">
            <div class="mask" v-on:click="showLotteryLog(false)"></div>
            <div class="lottery-log-box">
                <div class="close-btn" v-on:click="showLotteryLog(false)"></div>
                <div class="lottery-log-content">
                    <template v-for="item in lotteryLogList">
                        <div class="lottery-log-item">
                            <div class="prize-name">@{{ item.prize_name }}</div>
                            <template v-if="item.is_send != 1">
                                <div class="prize-status" v-on:click="showMyPrizeInfo(item)"></div>
                            </template>
                            <template v-else>
                                <div class="prize-status done"></div>
                            </template>
                        </div>
                    </template>
                </div>
            </div>
        </template>

        <template v-if="isPrizeInfoShow">
            <div class="mask" v-on:click="showPrizeInfo(false)"></div>
            <div class="prize-box">
                <div class="close-btn" v-on:click="showPrizeInfo(false)"></div>
                <div class="prize-name">@{{ prizeName }}</div>
                <div class="prize-content">
                    <div class="prize-desc">@{{ prizeDesc }}</div>
                    <div class="prize-value"><label style="color: #9e9e9e;">价值：</label>@{{ prizeValue }}</div>
                </div>
            </div>
        </template>

        <template v-if="isResultShow">
            <div class="mask" v-on:click="showResult(false)"></div>
            <div class="result-box">
                <div class="close-btn" v-on:click="showResult(false)"></div>
                <template v-if="isEntity">
                    <div class="result-content">恭喜用户获得<label
                            style="color: #b512f2;">@{{ resultName }}</label>，请填写地址信息用于发货。</div>
                    <div class="result-btn address" v-on:click="fillInAddress()"></div>
                </template>
                <template v-else>
                    <div class="result-content">恭喜用户获得<label
                            style="color: #b512f2;">@{{ resultName }}</label>，请联系客服获取。</div>
                    <div class="result-btn" v-on:click="contractService()"></div>
                </template>
            </div>
        </template>

        <template v-if="isAddressShow">
            <div class="mask" v-on:click="showAddress(false)"></div>
            <div class="address-box">
                <div class="close-btn" v-on:click="showAddress(false)"></div>
                <div class="address-content">
                    <div class="input-box">
                        <input type="text" v-model="name" class="name-input" placeholder="请填写姓名">
                    </div>
                    <div class="input-box">
                        <input type="number" v-model="phone" class="phone-input" placeholder="请填写手机号码">
                    </div>
                    <div class="input-box">
                        <input type="text" v-model="address" class="address-input" placeholder="请填写详细地址">
                    </div>
                    <div class="input-box">
                        <div class="submit-btn" v-on:click="submitAddress()"></div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const app = vueCreateApp({
            data() {
                return {
                    gameId: {{ $game_id }},
                    openId: '{{ $openid }}',
                    lotteryNum: {{ $lottery_num }},
                    ruleList: @json($rule_list),
                    isRuleShow: false,
                    isLotteryLogShow: false,
                    lotteryLogList: [],
                    prizeList: @json($prize_list),
                    prizeName: '',
                    prizeValue: '',
                    prizeDesc: '',
                    isPrizeInfoShow: false,
                    resultName: '',
                    isResultShow: false,
                    isAddressShow: false,
                    name: '',
                    phone: '',
                    address: '',
                    logid: 0,
                    isRun: false,
                    rotateAngle: 0, // 旋转角度
                    config: {
                        duration: 4000, // 总旋转时间 ms级
                        circle: 7, // 旋转圈数
                        mode: 'ease-in-out' // 由快到慢 惯性效果都省了
                    },
                    cricleAdd: 1, // 第几次抽奖
                    drawIndex: 0, // 中奖索引 转盘图片排序 指针右手开始 0-...
                }
            },
            mounted() {},
            watch: {
                lotteryNum: {
                    immediate: true,
                    handler(newVal) {
                        this.showLotteryNum();
                    }
                },
            },
            computed: {
                isForbid() {
                    return this.lotteryNum <= 0;
                },
                rotateStyle() {
                    const _c = this.config;
                    return `
                        -webkit-transition: transform ${_c.duration}ms ${_c.mode};
                        transition: transform ${_c.duration}ms ${_c.mode};
                        -webkit-transform: rotate(${this.rotateAngle}deg);
                        transform: rotate(${this.rotateAngle}deg);`;
                },
            },
            methods: {
                showLotteryNum() {
                    this.$nextTick(() => {
                        this.$refs.lotteryNum.innerText = this.lotteryNum;
                    });
                },
                showRule(val) {
                    return this.isRuleShow = val;
                },
                showLotteryLog(val) {
                    let _this = this;
                    http.post('/spin_wheel/lottery_log', {
                        openid: _this.openId,
                    }, function(code, msg, data) {
                        if (code !== 0) {
                            layer.msg(msg, {
                                time: 1000
                            })
                            return false;
                        }

                        _this.lotteryLogList = data;

                        return _this.isLotteryLogShow = val;
                    }, false);
                },
                showMyPrizeInfo(item) {
                    this.logid = item.id;
                    this.resultName = item.prize_name;
                    if (item.is_entity === 1) {
                        this.isEntity = true;
                    }

                    if (item.name !== '') {
                        this.name = item.name;
                    }

                    if (item.phone !== '') {
                        this.phone = item.phone;
                    }

                    if (item.address !== '') {
                        this.address = item.address;
                    }

                    this.isResultShow = true;
                },
                showPrizeInfo(val) {
                    return this.isPrizeInfoShow = val;
                },
                showResult(val) {
                    return this.isResultShow = val;
                },
                showAddress(val) {
                    return this.isAddressShow = val;
                },
                submitAddress() {
                    if (this.name == '' || this.phone == '' || this.address == '') {
                        layer.msg('请填写完整地址信息', {
                            time: 1000
                        });
                        return false;
                    }

                    if (!this.phoneVerify(this.phone)) {
                        layer.msg('手机号码格式错误', {
                            time: 1000
                        });
                        return false;
                    }

                    if (this.logid === 0) {
                        layer.msg('找不到该中奖记录', {
                            time: 1000
                        });
                        return false;
                    }

                    let _this = this;
                    http.post('/spin_wheel/address_fill', {
                        logid: _this.logid,
                        name: _this.name,
                        phone: _this.phone,
                        address: _this.address,
                    }, function(code, msg, data) {
                        if (code !== 0) {
                            layer.msg(msg, {
                                time: 1000
                            })
                            return false;
                        }

                        layer.msg('填写完成', {
                            time: 1000
                        });
                        _this.isAddressShow = false;

                        return false;
                    }, false);
                },
                showPrizeDesc(e) {
                    let rect           = document.getElementById('circle-area').getBoundingClientRect();
                    let circleX        = rect.x + Math.trunc(rect.width/2);
                    let circleY        = rect.y + Math.trunc(rect.height/2);
                    let curX           = e.clientX;
                    let curY           = e.clientY;
                    let angleInDegrees = Math.atan2(curY - circleY, curX - circleX) * 180 / Math.PI +
                        90.00;
                    if (angleInDegrees < 0) {
                        angleInDegrees = angleInDegrees + 360.00;
                    }

                    if (this.cricleAdd !== 1) {
                        angleInDegrees = angleInDegrees + 22.5
                    }

                    let index = (Math.trunc(angleInDegrees / 45) + this.drawIndex) % this.prizeList
                        .length;

                    this.prizeName       = this.prizeList[index].name;
                    this.prizeValue      = this.prizeList[index].value;
                    this.prizeDesc       = this.prizeList[index].desc;
                    this.isPrizeInfoShow = true;
                },
                lottery() {
                    if (this.isRun) {
                        return false;
                    }

                    if (this.lotteryNum <= 0) {
                        return false;
                    }

                    let _this = this;
                    http.post('/spin_wheel/lottery', {
                        game_id: _this.gameId,
                        openid: _this.openId,
                    }, function(code, msg, data) {
                        if (code !== 0) {
                            layer.msg(msg)
                            return false;
                        }

                        _this.drawIndex = data.index;
                        _this.logid = data.logid;
                        _this.isRun = true;
                        _this.lotteryNum--;
                        _this.rotateAngle = _this.config.circle * 360 * _this.cricleAdd - (
                            22.5 + _this.drawIndex * 45);
                        // 圈数位置解析
                        // this.config.circle * 360 * this.cricleAdd 顺时针总圈数/累积总圈数
                        // 22.5 + this.drawIndex * 45 ===> (奖品位置 === this.drawIndex * 45) (指针中间位置 === 22.5)
                        _this.cricleAdd++;

                        setTimeout(() => {
                            _this.isRun = false;
                            if (_this.prizeList[_this.drawIndex].is_entity === 1) {
                                _this.isEntity = true;
                            } else {
                                _this.isEntity = false;
                            }

                            _this.resultName = _this.prizeList[_this.drawIndex].name;
                            _this.isResultShow = true;
                        }, _this.config.duration)
                    }, false);

                    return false;
                },
                fillInAddress() {
                    this.isResultShow     = false;
                    this.isAddressShow    = true;
                },
                contractService() {
                    this.isLotteryLogShow = false;
                    this.isResultShow     = false;
                    window.open("https://work.weixin.qq.com/kfid/kfcc5cb120779113118");
                },
                phoneVerify(phone) {
                    const pattern = /^1[3456789]\d{9}$/;
                    return pattern.test(phone);
                },
            }
        })
        app.mount('#vapp')
    })
</script>

</html>
